import Image from 'next/image'

type T = {
  title: string
  desc?: string
  steps: { step: string; title: string; desc: string; img: any }[]
}
export default function Steps(props: T) {
  const { title, desc, steps } = props
  return (
    <div className="flex flex-col gap-10 py-row max-sm:py-sRow">
      <div className="flex flex-col gap-3">
        <h2 className="leading-tight text-secondTitle font-bold text-black text-center">
          {title}
        </h2>
        {desc && (
          <div className="text-desc text-menuTxt text-center">{desc}</div>
        )}
      </div>
      {steps?.map((item) => (
        <div key={item.step} className="flex flex-row gap-7 max-sm:flex-col">
          <div className="flex-1 flex flex-col gap-3 text-black">
            <div className="step-title text-[20px]">{item.step}</div>
            <div className="leading-tight font-bold text-[20px] text-menuTxt">
              {item.title}
            </div>
            <div>{item.desc}</div>
          </div>
          <div className="w-[435px] h-[210px] max-sm:w-full max-sm:h-auto">
            <Image src={item.img} alt="step image" />
          </div>
        </div>
      ))}
    </div>
  )
}
